<html>
    <head>
        <title>Gocase</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="/file?name=gocase.js"></script>
        <style type="text/css">
            #title {
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 20px;
            }
            
            .page {
                padding: 10px;
                text-align: left;
                display: none;
            }
            
            #login_page {
                width: 210px;
                border: solid 1px silver;
            }
            
            #topics_page  {
                width: 450px;
                border: solid 1px silver;
            }
        </style>
    </head>
    
    <body>
        <div align="center">
            <div id="login_page" class="page">
                <div id="title">Gocase</div>
                
                <label for="nickname">Nickname</label><br/>
                <input id="nickname" type="text"/>
                
                <input id="join" type="button" value="Join"/>
            </div>
            
            <div id="topics_page" class="page">
            
            </div>
        </div>
    </body>
</html>
